<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IEEE 日程管理系统</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Segoe+UI,Arial,sans-serif&display=swap"
      rel="stylesheet"
    />
    <!-- Base -->
    <link rel="stylesheet" href="script/css/base/variables.css">
    <link rel="stylesheet" href="script/css/base/reset.css">
    <link rel="stylesheet" href="script/css/base/typography.css">

    <!-- Layouts -->
    <link rel="stylesheet" href="script/css/layouts/header.css">
    <link rel="stylesheet" href="script/css/layouts/footer.css">
    <link rel="stylesheet" href="script/css/layouts/sections.css">

    <!-- Components -->
    <link rel="stylesheet" href="script/css/components/nav.css">
    <link rel="stylesheet" href="script/css/components/buttons.css">
    <link rel="stylesheet" href="script/css/components/modal.css">

    <!-- Page-specific -->
    <link rel="stylesheet" href="script/css/pages/calendar.css">

  </head>
  <body>
    <!-- 导航栏 -->
    <section class="partners-section">
        <br>
        <br>
        <div class="section-header">
          <h2>活动日历</h2>
          <p></p>
        </div>

    <!-- 主日历区域 -->
    <main class="calendar-container">
      <div class="calendar-controls">
        <button class="controls-btn" id="prevMonthBtn">‹</button>
        <h2 id="monthYear" style="color: black"></h2>
        <button class="controls-btn" id="nextMonthBtn">›</button>
        <button class="add-btn" id="addEventBtn" style="pointer-events: none">
          <img src="res/icon/icons8-添加-48.png" alt="Add Event" />
        </button>
      </div>
      <table class="calendar-table" id="calendar">
        <thead>
          <tr>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
            <th>Sun</th>
          </tr>
        </thead>
        <tbody id="calendarBody">
          <!-- 日历内容将通过JavaScript动态生成 -->
        </tbody>
      </table>
    </main>

    <!-- 添加事件表单模态框 -->
    <div class="modal" id="eventModal">
      <div class="modal-content">
        <span class="close-btn">&times;</span>
        <h3>添加新事件</h3>
        <form id="eventForm">
          <div class="form-group">
            <label for="eventTitle">事件标题</label>
            <input type="text" id="eventTitle" required />
          </div>
          <div class="form-group">
            <label for="eventDate">日期</label>
            <input type="date" id="eventDate" required />
          </div>
          <div class="form-group">
            <label for="eventTime">时间</label>
            <input type="time" id="eventTime" required />
          </div>
          <div class="form-group">
            <label for="eventLocation">地点</label>
            <input type="text" id="eventLocation" required />
          </div>
          <div class="form-group">
            <label for="eventDescription">描述</label>
            <textarea id="eventDescription" rows="3"></textarea>
          </div>
          <button type="submit" class="submit-btn">保存事件</button>
        </form>
      </div>
    </div>

    <!-- 事件详情模态框 -->
    <div class="modal" id="detailModal">
      <div class="modal-content">
        <span class="close-btn">&times;</span>
        <h3 id="detailTitle">事件详情</h3>
        <div class="event-details">
          <p><strong>日期:</strong> <span id="detailDate"></span></p>
          <p><strong>时间:</strong> <span id="detailTime"></span></p>
          <p><strong>地点:</strong> <span id="detailLocation"></span></p>
          <p><strong>状态:</strong> <span id="detailStatus"></span></p>
          <p><strong>描述:</strong> <span id="detailDescription"></span></p>
        </div>
        <div class="detail-actions">
          <button class="edit-btn" id="editEventBtn" style="pointer-events: none">编辑</button>
          <button class="delete-btn" id="confirmDeleteBtn" style="pointer-events: none">删除</button>
          <button class="cancel-btn" id="closeDetailBtn">关闭</button>
        </div>
      </div>
    </div>

    <!-- 修改事件模态框的标题 -->
    <div class="modal" id="eventModal">
      <div class="modal-content">
        <span class="close-btn">&times;</span>
        <h3>添加新事件</h3>
        <!-- 这个标题会被JavaScript动态更新 -->
        <form id="eventForm">
          <div class="form-group">
            <label for="eventTitle">事件标题</label>
            <input type="text" id="eventTitle" required />
          </div>
          <div class="form-group">
            <label for="eventDate">日期</label>
            <input type="date" id="eventDate" required />
          </div>
          <div class="form-group">
            <label for="eventTime">时间</label>
            <input type="time" id="eventTime" required />
          </div>
          <div class="form-group">
            <label for="eventLocation">地点</label>
            <input type="text" id="eventLocation" required />
          </div>
          <div class="form-group">
            <label for="eventDescription">描述</label>
            <textarea id="eventDescription" rows="3"></textarea>
          </div>
          <button type="submit" class="submit-btn">保存事件</button>
        </form>
      </div>
    </div>

    <script src="script/js/calendar.js"></script>
    <script src="script/js/template-loader.js"></script>
  </body>
</html>
